<template>
  <div>
    <div>
      <!-- 头部导航 -->
      <van-nav-bar fixed>
        <template v-slot:left>
          <img class="imglogo" src="@/assets/logo.png" alt="" />
        </template>
        <template #right>
          <van-icon
            name="search"
            color="#fff"
            size="0.48rem"
            @click="moveSearchPageFn"
          />
        </template>
      </van-nav-bar>
    </div>
    <!-- tab栏导航切换 -->
    <div class="main">
      <van-tabs v-model="channelId" animated sticky offset-top="1.226667rem">
        <!-- 37.5px/46px=1.226666666666 -->
        <van-tab
          v-for="obj in userChanneList"
          :key="obj.id"
          :title="obj.name"
          :name="obj.id"
        >
          <!-- 文章列表内容 -->
          <ArticleList :channelId="channelId"></ArticleList>
        </van-tab>
      </van-tabs>

      <van-icon
        name="plus"
        size="0.37333334rem"
        class="moreChannels"
        @click="showPopup"
      />
    </div>

    <!-- 频道管理-弹出层 -->
    <van-popup class="channel_popup" v-model="show">
      <ChannelEdit
        :userList="userChanneList"
        :unCheckList="unCheckChannelList"
        @addChannelEV="addChannelFn"
        @removeChannelEV="removeChannelFn"
        @closeEV="closeFn"
        v-model="channelId"
        ref="editRef"
      >
      </ChannelEdit>
    </van-popup>
  </div>
</template>

<script>
import {
  getUserChanneslApi,
  getAllChannelApi,
  updateChannelsApi,
  removeTheChannelApi,
} from "@/api";
import ArticleList from "./components/ArticleList";
import ChannelEdit from "./ChannelEdit.vue";
export default {
  components: {
    ArticleList,
    ChannelEdit,
  },
  data() {
    return {
      channelId: 0,
      allChannelList: [], //所有选择频道列表
      userChanneList: [], //用户选择频道列表
      // articleList: [], //文章列表
      show: false, //频道管理-弹出层隐藏
    };
  },
  methods: {
    /*文章列表
    async channelFn() {
        const add = await getAllArticleListApi({
          channel_id: this.channelId,
          timestamp: new Date().getTime(),//时间
        });
        console.log(add, "文章列表");
        this.articleList = add.data.data.results;
    },
    */

    //  搜索
    moveSearchPageFn() {
      this.$router.push("/Search");
    },

    // 频道管理层-弹出层事件方法
    showPopup() {
      this.show = true;
    },

    //添加频道
    async addChannelFn(channelObj) {
      this.userChanneList.push(channelObj);

      const newArr = this.userChanneList.filter((obj) => obj.id !== 0);
      const theNewArr = newArr.map((obj, index) => {
        const newObj = { ...obj };
        delete newObj.namespaced;
        newObj.seq = index;

        return newObj; //让map方法把新对象收集起来形成一个新的数组
      });

      const res = await updateChannelsApi({
        channels: theNewArr,
      });
      console.log(res);
    },

    // 删除频道
    async removeChannelFn(channelObj) {
      let index = this.userChanneList.findIndex(
        (obj) => obj.id === channelObj.id
      );
      this.userChanneList.splice(index, 1);

      const res = await removeTheChannelApi({
        channelId: channelObj.id,
      });
      console.log(res, "删除");
    },

    // 关闭弹窗层
    closeFn() {
      this.show = false;
      this.$refs.editRef.isEdit = false; //第二种:弹出层初始化
    },
  },

  async created() {
    const res = await getUserChanneslApi();
    // console.log(res, "用户频道");
    this.userChanneList = res.data.data.channels;
    // console.log("用户选择频道列表:", this.userChanneList);

    // 调用文章列表事件
    // this.channelFn();

    // 所有选择频道列表
    const res2 = await getAllChannelApi();
    // console.log(res2);
    this.allChannelList = res2.data.data.channels;
  },

  //计算属性
  computed: {
    unCheckChannelList() {
      //目标:把所有频道数组挨个对象取出，去用户已选择频道数组里查找,如果找不到，则让filter方法收集到一个新数组里
      const newArr = this.allChannelList.filter((bigObj) => {
        let index = this.userChanneList.findIndex((smallObj) => {
          return smallObj.id === bigObj.id;
        });
        //如果找到了
        if (index > -1) {
          return false;
        } else {
          return true;
        }
      });
      return newArr;

      // 简写
      // return this.allChannelList.filter(
      //   (bigObj) =>
      //     this.userChanneList.findIndex(
      //       (smallObj) => smallObj.id === bigObj.id
      //     ) === -1
      // );
    },
  },
};
</script>


<style lang="less" scoped>
.van-nav-bar {
  background: #1989fa;

  /deep/.van-nav-bar__title {
    color: #fff;
  }
  /deep/.van-nav-bar__text {
    color: #fff;
  }
  .imglogo {
    width: 45px;
    height: 46px;
  }
}

/deep/.van-tabs__line {
  background: #1989fa;
}

.main {
  padding-top: 46px;
}

/deep/.van-tabs__wrap {
  padding-right: 30px;
  background: #fff;
}
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
.channel_popup {
  width: 100vw;
  height: 100vh;
}
</style>